<template>
  <div class="message">
    <h1>药品信息</h1>
    <el-table
      ref="singleTable"
      :data="arr"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column property="code" label="药品编码" width="80">
      </el-table-column>
      <el-table-column property="name" label="药品名称" width="80">
        <template slot-scope="scope">
          {{ typeName[scope.row.name] }}
        </template>
      </el-table-column>
      <el-table-column property="regular" label="药品规格" width="80">
      </el-table-column>
      <el-table-column property="num" label="数量" width="80">
        <template slot-scope="scope">
          <el-input v-model="scope.row.input" clearable> </el-input>
        </template>
      </el-table-column>
      <el-table-column property="unit" label="单位" width="80">
        <template slot-scope="scope">
          <el-input v-model="scope.row.input1" clearable> </el-input>
        </template>
      </el-table-column>
      <el-table-column property="price" label="单价" width="90">
        <template slot-scope="scope">
          <el-input v-model="scope.row.input2" clearable> </el-input>
        </template>
      </el-table-column>
      <el-table-column property="allpri" label="总价" width="90">
        <template slot-scope="scope">
          <el-input v-model="scope.row.input3" clearable> </el-input>
        </template>
      </el-table-column>
      <el-table-column property="edit" label="编辑">
        <template slot-scope="scope">
          <i class="el-icon-delete-solid" @click="handleDelete(scope.row.id)">
          </i>
        </template>
      </el-table-column>
    </el-table>
    <div class="addbtn">
      <el-button icon="el-icon-circle-plus-outline" @click="openBox"
        >添加药品</el-button
      >
    </div>
  </div>
</template>

<script>
import { removeDrug } from "../../../api/drug";
export default {
  props: ["arr"],
  data() {
    return {
      //映射对象
      typeName: {
        0: "头孢颗粒",
        1: "vc银翘片",
        2: "999感冒灵",
      },

      input: "",
      input1: "",
      input2: "",
      input3: "",

      currentRow: null,
    };
  },

  methods: {
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleDelete(id) {
      // console.log(id);
      removeDrug({ id: id }).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.$emit("resetparentFun");
        }
      });
    },
    openBox() {
      this.$emit("openBox");
    },
  },
};
</script>

<style lang="less" scoped>
.message {
  box-shadow: 0 0 5px #333;
  border-radius: 10px;
  margin: 30px;
  overflow-y: auto;
  overflow-x: hidden;
  h1 {
    color: #666eeb;
    font-size: 28px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    padding: 20px;
  }
  .el-icon-delete-solid {
    color: #9298ef;
    font-size: 20px;
    &:hover {
      color: brown;
    }
  }
  .addbtn {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    .el-button {
      width: 130px;
      background: #28d094;
      color: #fff;
      font-weight: 800;
      font-size: 16px;
      height: 40px;
      border-radius: 10px;
    }
  }
}
</style>
